<!-- 基础：4、计算属性 计算缓存vs Methods -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：4、计算属性 计算缓存vs Methods</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<p>{{ reverseMessage }}</p>
		<!-- 回顾一下前面介绍v-on指令，我们发现用实例的方法属性methods为实例添加方法同样能达到计算属性的效果 
			 使用形式上只是由一个属性变成了调用一个方法
			PS.这里经过测试，computed和methods不能使用相同的方法名，否则前面的computed计算属性不生效，所以这
			   里我把methods里面改成了reverseMessage2
		-->
		<p>{{ reverseMessage2() }}</p>

		<!-- 两者使用形式上如此接近，那有什么区别呢？
			区别就在于：
				computed使用了缓存，假如多次调用，但是依赖（这里是message）没有发生改变，则实际只会调用一次，
				以后的调用取第一次调用的结果

				methods则只要调用一次，方法体就会被执行一次

				将js区分区别注释代码解除注释，执行，会发现console中输出'computed called!'一次，输出'methods called!'两次
				验证了上面说的两者的区别
		 -->
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				message: 'huyihao'
			},
			computed: {
				reverseMessage: function(){
					// 区分区别注释代码
					// console.log('computed called!')
					return this.message.split('').reverse().join('')
				}
			},
			methods: {
				reverseMessage2: function(){
					// 区分区别注释代码
					// console.log('methods called!')

					return this.message.split('').reverse().join('')
				}
			}
		})

		console.log(vm.reverseMessage)
		console.log(vm.reverseMessage2())
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->